
<template>
  <div>
    <!-- <input type="button" value="获取远程数据" @click="sendReq()" /> -->
    <div class="title">学生列表</div>
    <div class="thead">
      <div class="row bold">
        <div class="col">编号</div>
        <div class="col">姓名</div>
        <div class="col">性别</div>
        <div class="col">年龄</div>
      </div>
    </div>
    <div class="tbody">
      <!-- 判断是否有学生数据 -->
      <div v-if="students.length > 0">
        <!-- 有学生数据，遍历数组得到每个学生对象 -->
        <div class="row" v-for="s of students" :key="s.id">
          <!-- 将学生对象的每个属性通过文本插值显示在页面上 -->
          <div class="col">{{s.id}}</div>
          <div class="col">{{s.name}}</div>
          <div class="col">{{s.sex}}</div>
          <div class="col">{{s.age}}</div>
        </div>
      </div>
      <!-- 没有学生数据 -->
      <div class="row" v-else>暂无学生数据</div>
    </div>
  </div>
</template>
<script>
import axios from "../util/myaxios";
const options = {
  // 组件加载完成会执行 mounted 函数
  mounted() {
    // 调用方法获取学生数据
    this.sendReq();
  },
  data: function () {
    return {
      // 存放学生对象的数组
      students: [],
    };
  },
  methods: {
    async sendReq() {
      // 获取学生数据
      const resp = await axios.get("api/students");
      console.log(resp.data.data);
      // 将学生数据存储起来
      this.students = resp.data.data;
    },
  },
};
export default options;
</script>

<style scoped>
div {
  font-family: 华文行楷;
  font-size: 20px;
}

.title {
  margin-bottom: 10px;
  font-size: 30px;
  color: #333;
  text-align: center;
}

.row {
  background-color: #fff;
  display: flex;
  justify-content: center;
}

.col {
  border: 1px solid #f0f0f0;
  width: 15%;
  height: 35px;
  text-align: center;
  line-height: 35px;
}

.bold .col {
  background-color: #f1f1f1;
}
</style>